<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click="list.sort((a,b)=>a-b)">排序</button>
            <button @click="list.push(Math.round(Math.random()*10))">生成(push)</button>
        </div>
        <br>
        <div>
            <button @click="addEle">新增</button>
        </div>
        <br>
        <div>
            <button @click="editFn">edit</button>
            <button @click="delFn">del</button>
        </div>


        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>

    </div>
</body>
<script>
    // 由于 JavaScript 的限制，Vue不能检测数组和对象的变化(对数组和对象的某些操作无法检测)。深入响应式原理中有相关的讨论。

    // 数组的更新检测:
    // 变更数组  => 调用此方法之后会影响原数组
    // 数组的变更方法 (影响原数组的方法) -> Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。  
    // push()
    // pop()
    // shift()
    // unshift()
    // splice()
    // sort()
    // reverse()

    // 替换数组(非变更数组)  => 调用此方法之后会返回新数组
    // slice()
    // concat()
    // map()
    // 当使用非变更方法时，可以用新数组替换旧数组：

    // 哪些对数组的操作,Vue无法检测?
    // 1. 对应下标赋值  
    //  this.list[1] = 40;
    
    // 2. 改变数组的长度 
    // this.list.length --;






    new Vue({
        el: "#app",
        data: {
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
        },
        methods: {
            addEle: function () {
                var num = Math.round(Math.random() * 100);
                // this.list.push(num);   // 影响原数组 => 数组的变更方法


                this.list = this.list.concat(num);  // concat方法返回新数组

            },
            editFn: function () {
                // 数组对应下标赋值
                // this.list[1] = 40;
                // console.log(this.list);

                // 解决方法1: 
                // this.list.splice(1,1,40);

                // 方法2: 
                // var arr = this.list.slice();
                // arr[1] = 40;
                // this.list = arr;

                // 方法3:
                // Vue.set(obj,key,val)   构造函数Vue的静态方法  => 可以修改Vue中的对象的数据 (可以被vue检测到)
                // vm.$set()   实例化对象上也有此方法 (Vue.prototype.$set)

                // Vue.set(this.list,1,40);  
                // this.$set(this.list,1,40);  

                // 方法4:
                // vm.$forceUpdate()   强制更新视图 
                this.list[1] = 40;
                this.$forceUpdate();

            },
            delFn: function () {
                // this.list.length--;
                // console.log(this.list);

                // 方法1:
                // this.list.pop();

                // 方法2:
                this.list.length--;
                this.$forceUpdate();
            }
        }
    })


</script>

</html>